<template>
  <el-scrollbar
    class="sub-menu"
    :class="data.length > 5 ? 'is-scroll' : ''"
    :style="{'height': computHeight}">
    <!-- <div class="arrow up" @click="toPrev" v-if="canUp"><i class="el-icon-arrow-up"></i></div> -->
    <template v-for="child of data">
      <el-menu-item
        :index="child.famPortalMenuV.id.toString()"
        :key="child.famPortalMenuV.id"
        v-if="!child.childMenuList || !child.childMenuList.length">
        {{child.famPortalMenuV.sceneName}}
      </el-menu-item>
      <!-- <el-popover
        :key="child.famPortalMenuV.id"
        class="el-submenu"
        placement="right"
        trigger="hover"
        width="200"
        v-else>
        <el-menu-item slot="reference" :index="child.famPortalMenuV.id.toString()">
          {{child.famPortalMenuV.sceneName}}
          <i class="el-icon-arrow-right icon-right"></i>
        </el-menu-item>
        <ul role="menu" class="el-menu el-menu--popup el-menu--popup-bottom-start">
          <el-menu-item
            v-for="sub of child.childMenuList"
            :index="sub.famPortalMenuV.id.toString()"
            :key="sub.famPortalMenuV.id">
            {{sub.famPortalMenuV.sceneName}}
          </el-menu-item>
        </ul>
      </el-popover> -->
      <el-submenu
        :index="child.famPortalMenuV.id.toString()"
        :key="child.famPortalMenuV.id"
        :popper-append-to-body="true"
        v-else>
        <template slot="title">{{child.famPortalMenuV.sceneName}}</template>
        <el-menu-item
          v-for="sub of child.childMenuList"
          :index="sub.famPortalMenuV.id.toString()"
          :key="sub.famPortalMenuV.id">
          {{sub.famPortalMenuV.sceneName}}
        </el-menu-item>
      </el-submenu>
    </template>
    <!-- <div class="arrow down" @click="toNext" v-if="canDown"><i class="el-icon-arrow-down"></i></div> -->
  </el-scrollbar>
</template>

<script>
export default {
  name: 'subMenu',
  props: {
    data: {
      type: Array,
    },
  },
  computed: {
    childMenuList() {
      return this.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
    totalPage() {
      return Math.ceil(this.data.length / this.pageSize);
    },
    canUp() {
      return this.currentPage > 1;
    },
    canDown() {
      return this.currentPage < this.totalPage;
    },
    computHeight() {
      const maxLen = 5;
      const height = Math.min(this.data.length, maxLen) * 44;
      return `${height}px`;
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
    };
  },
  methods: {
    toPrev() {
      this.currentPage = this.currentPage - 1;
    },
    toNext() {
      this.currentPage = this.currentPage + 1;
    },
  },
};
</script>

<style lang="scss">
.sub-menu {
  &.is-scroll {
    .el-scrollbar__wrap {
      padding-left: 20px;
    }
    .el-scrollbar__bar.is-vertical {
      left: 10px;
      border: 1px solid #666;
      padding: 2px;
      border-radius: 6px;
      .el-scrollbar__thumb {
        background-color: #666;
      }
    }
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .arrow {
    height: 20px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
  }
}
</style>
